<!-- 实名认证 -->
<template>
	<view class="page-view">
		<view class="form-view">
			<u-form ref="uForm" :model="form" label-position="top" :rules="rules" :error-type="['toast']">
				<u-form-item label="上传身份证人像面" :border-bottom="false" prop="front_image">
					<u-upload ref="front_image" :custom-btn="true" max-count="1" width="310" height="174"
						:action="$u.api.uploadUrl()" :header="$u.api.headerConfig()" name="pics"
						:formData="{filename: 'pics',type:'real'}" @on-uploaded="uploadImageHandle" index="front_image"
						@on-remove="removeImage" @on-choose-complete="chooseComplete">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-image src="/static/card_face.png" mode="aspectFill" width="310" height="174"></u-image>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item label="上传身份证国徽面" :border-bottom="false" prop="back_image">
					<u-upload ref="back_image" :custom-btn="true" max-count="1" width="310" height="174"
						:action="$u.api.uploadUrl()" :header="$u.api.headerConfig()" name="pics"
						:formData="{filename: 'pics',type:'real'}" @on-uploaded="uploadImageHandle" index="back_image"
						@on-remove="removeImage" @on-choose-complete="chooseComplete">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-image src="/static/card_back.png" mode="aspectFill" width="310" height="174"></u-image>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item label="姓名" prop="real_name" :border-bottom="false" required>
					<u-input v-model="form.real_name" placeholder="上传身份证后自动识别填入" :custom-style="customInputStyle" />
				</u-form-item>
				<u-form-item label="身份证号" prop="card_id" :border-bottom="false" required>
					<u-input v-model="form.card_id" placeholder="上传身份证后自动识别填入" :custom-style="customInputStyle" />
				</u-form-item>
			</u-form>
			<view style="margin-top: 200rpx;">
				<u-button type="primary" shape="circle" :loading="loading" hover-class="none"
					@click="submitHandle">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/utils/wxApplet/common.js'
	export default {
		data() {
			return {
				form: {
					real_name: '',
					card_id: '',
					front_image: '',
					back_image: '',
					valid_period: ''
				},
				rules: {
					real_name: [{
						required: true,
						message: '请填写姓名'
					}],
					card_id: [{
						required: true,
						message: '请填写身份证号'
					}],
					front_image: [{
						required: true,
						message: '请完成身份证上传'
					}],
					back_image: [{
						required: true,
						message: '请完成身份证上传'
					}]
				},
				customInputStyle: {
					backgroundColor: '#F8F8F8',
					borderRadius: '90rpx',
					padding: '20rpx 30rpx'
				},
				loading: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			chooseComplete() {
				uni.showLoading({
					title: '上传中...'
				})
			},
			uploadImageHandle(lists, name) {
				console.log(lists);
				uni.hideLoading()
				if (!lists[0].error) {
					const res = lists[0].response.data
					if (name == 'front_image' && res.real_info.valid_period) {
						console.log(1);
						this.$refs.front_image.clear()
						this.$u.toast('请传入身份证的人像面')
						this.form.real_name = ''
						this.form.card_id = ''
					} else if (name == 'back_image' && res.real_info.real_name) {
						console.log(2);
						this.$refs.back_image.clear()
						this.$u.toast('请传入身份证的国徽面')
					} else if (!res.real_info.valid_period && !res.real_info.real_name) {
						this.$u.toast('请传入正确的身份证照片')
						if (name == 'front_image') {
							this.$refs.front_image.clear()
							this.form.real_name = ''
							this.form.card_id = ''
						} else {
							this.$refs.back_image.clear()
						}
					} else {
						this.form[name] = res.url
						if (name == 'front_image') {
							this.form.real_name = res.real_info.real_name
							this.form.card_id = res.real_info.card_id
						} else {
							this.form.valid_period = res.real_info.valid_period
						}
					}
				} else {
					this.$u.toast(lists[0].error)
				}
			},
			removeImage(index, list, name) {
				this.form[name] = ''
			},
			submitHandle() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true;
						this.$u.api.userRealHandle(this.form).then(res => {
							this.$u.toast('实名认证成功')
							common.getUserInfo()
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/subpage/setting/sminfo'
								})
							}, 1000)
						}).finally(() => {
							this.loading = false
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		padding-top: 30rpx;
		height: 100%;

		.form-view {
			background-color: white;
			height: 100%;
			padding: 30rpx;

			.input-box {
				height: 88rpx;
				background: #F8F8F8;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
			}
		}
	}
</style>